<html>
    <head>
        <title>Itowns - Globe/Gpx</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>
        <script src="../dist/itowns.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>
        <script type="text/javascript">
            // # Loading gpx file

            // Define initial camera position
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 0.089, 42.8989),
                range: 80000,
                tilt: 45,
            }

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            var viewerDiv = document.getElementById('viewerDiv');

            // Instanciate iTowns GlobeView*
            var view = new itowns.GlobeView(viewerDiv, placement);

            setupLoadingScreen(viewerDiv, view);

            // Add one imagery layer to the scene
            // This layer is defined in a json file but it could be defined as a plain js
            // object. See Layer* for more info.
            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer('Ortho', config);
                view.addLayer(layer);
            });
            // Add two elevation layers.
            // These will deform iTowns globe geometry to represent terrain elevation.
            function addElevationLayerFromConfig(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ElevationLayer(config.id, config);
                view.addLayer(layer);
            }
            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);

            // update the waypoint
            var distance, scale, point = new itowns.THREE.Vector3();
            var size = new itowns.THREE.Vector2();
            function updatePointScale(renderer, scene, camera) {
                point.copy(this.geometry.boundingSphere.center).applyMatrix4(this.matrixWorld);;
                distance = camera.position.distanceTo(point);
                renderer.getSize(size);
                scale = Math.max(2, Math.min(100, distance / size.y));
                this.scale.set(scale, scale, scale);
                this.updateMatrixWorld();
            }

            var waypointGeometry = new itowns.THREE.BoxGeometry(1, 1, 80);
            var waypointMaterial = new itowns.THREE.MeshBasicMaterial({ color: 0xffffff });
            // Listen for globe full initialisation event
            view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
                console.info('Globe initialized');
                itowns.Fetcher.xml('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx')
                    .then(gpx => itowns.GpxParser.parse(gpx, {
                        in: {
                            crs: 'EPSG:4326',
                        },
                        out: {
                            crs: view.referenceCrs,
                            structure: '3d',
                            style: new itowns.Style({
                                stroke : {
                                    color: 'red',
                                    width: 2,
                                },
                                point : {
                                    color: 'white',
                                }
                            })
                        }
                    }))
                    .then(itowns.Feature2Mesh.convert())
                    .then(function (mesh) {
                        if (mesh) {
                            mesh.updateMatrixWorld();
                            mesh.traverse((m) => {
                                if (m.type == 'Points') {
                                    var vertices = m.feature.vertices;
                                    for (var i = 0; i < vertices.length; i += 3) {
                                        var waypoint = new itowns.THREE.Mesh(waypointGeometry, waypointMaterial);
                                        waypoint.position.fromArray(vertices, i);
                                        waypoint.lookAt(mesh.worldToLocal(new itowns.THREE.Vector3()));
                                        waypoint.onBeforeRender = updatePointScale;
                                        waypoint.updateMatrix();
                                        mesh.add(waypoint);
                                        waypoint.updateMatrixWorld();
                                    }
                                }
                            });
                            view.scene.add(mesh);
                            view.notifyChange();
                        }
                    });
            });
        </script>
    </body>
</html>
